<!DOCTYPE html>
<html>
<head>
    <title>U Control Chart</title>
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
    <div id='chart'></div>
    <script>
        var target_chart = document.getElementById('chart');
        var layout = {
    title: 'U Control Chart (Defects per Unit)',
    height: 600,
    width: 1000,
    xaxis: {
    title: 'Sample Number',
    },

    yaxis: {
    title: 'Defects per Unit (U)',
    },

};

var trace0 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["0.09090909090909091","0.2222222222222222","0.375","0.0","0.0","0.0","0.0625","0.14285714285714285","0.09090909090909091","0.07692307692307693","0.0","0.0","0.0","0.0","0.14285714285714285","0.06666666666666667","0.25","0.36363636363636365","0.125","0.09090909090909091"],
mode: 'lines+markers',
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'U Value',
};
var trace1 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["0.3836291217220815","0.4136682887538753","0.4327555206075876","0.4327555206075876","0.45579897611730535","0.3975210580530958","0.3350036918129312","0.45579897611730535","0.3836291217220815","0.3608215051448205","0.34274324010081525","0.3836291217220815","0.4327555206075876","0.4327555206075876","0.45579897611730535","0.34274324010081525","0.4327555206075876","0.3836291217220815","0.4327555206075876","0.3836291217220815"],
mode: 'lines',
line: {
  "color" : "red",
  "dash" : "dash",
  "shape" : "linear",
  "simplify" : true,
  "smoothing" : 1.0,
  "width" : 1.5
},
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'UCL',
};
var trace2 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901","0.09900990099009901"],
mode: 'lines',
line: {
  "color" : "green",
  "dash" : "dot",
  "shape" : "linear",
  "simplify" : true,
  "smoothing" : 1.0,
  "width" : 1.5
},
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'CL',
};
var trace3 =
{
x: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"],
y: ["0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0","0.0"],
mode: 'lines',
line: {
  "color" : "red",
  "dash" : "dash",
  "shape" : "linear",
  "simplify" : true,
  "smoothing" : 1.0,
  "width" : 1.5
},
xaxis: 'x',
yaxis: 'y',
type: 'scatter',
name: 'LCL',
};

        var data = [ trace0, trace1, trace2, trace3];
Plotly.newPlot(target_chart, data, layout);            </script>

</body>
</html>